<template>
	<div id="detail">
		<!--------当前位置---------->
		<div class="path">
			<p>当前位置：</p>
			<router-link to="/home/index">首页 &gt; </router-link>
			<router-link to="/home/good">精选好货 &gt; </router-link>
			<p>{{task_title}}</p>
		</div>
		<!--------基本信息------------->
		<div class="detail_1">
			<div class="detail_1_l">
				<img :src="task_mainImg"/>
				<div class="detail_1_text">
					<div class="detail_title">
						<img :src="getPaltformImg(task_platform)"/>
						<p>{{task_title}}</p>
					</div>
					<div class="residue">
						剩余份数：<span>{{task_now}}/{{task_all}}</span>份
					</div>
					<div class="apply">
						<div class="detail_price">
							<p>商品价值：<span>{{task_price}}</span>元</p>
							<p v-if="task_gold>0">金币兑换：<span>{{task_gold}}</span>金币</p>
						</div>
						<div class="task_time">
							<img src="../../static/img/detail-02.png"/>
							<p v-if="type==3 || type==7">开奖时间：每<span>{{groupsNumber}}</span>人申请，距开奖仅差<span>{{groupsNumber-currentGroupNumber}}</span>人</p>
							<p v-else>下次开奖时间：{{oneDay}}<span>{{task_time}}</span></p>
						</div>
						<div class="toapply">
							<div class="exchange" v-if="task_gold>0">
								<img src="../../static/img/detail-03.png"/>
								<p>金币兑换</p>
							</div>
							<!--<div @click="showqrcode" :class="nowSurplus==0 && (type==3 || type==7)?'phone noNum':'phone'">
								<img src="../../static/img/detail-04.png"/>
								<p v-if="type==3 || type==7">手机参团</p>
								<p v-else>手机申请</p>
								<div v-show="qrcodeShow" class="qrcode">
									<p>微信扫一扫</p>
									<p>注：手机端账号和pc端账号须一致(否则，重新登录)</p>
									<div id='QRcode' class="QRcode"></div>
									<!--<img :src="task_code"/>
								</div>
							</div>-->
							<div>
								<p v-if="nowSurplus==0 && (type==3 || type==7)">今日份额已满</p>	
							</div>
						</div>
					</div>
					<div class="guarantee">
						<img src="../../static/img/detail-05.png"/>
						<p>商家已存入总试用担保金：{{task_guarantee}}元，请放心申请</p>
					</div>
					<div class="people">
						<!--<p class="people_apply"><span>{{people_apply}}</span>已申请</p>-->
						<p class="people_pass"><span>{{people_pass}}</span>已中奖</p>
					</div>
					<div class="bdsharebuttonbox bdshare-button-style0-16 share">
						<p style="margin-right: 5px;">分享领<span>90</span>元现金</p>
						<a href="#" class="bds_more" data-cmd="more"></a>
			            <a href="#" class="bds_sqq" data-cmd="sqq"></a>
			            <a href="#" class="bds_qzone" data-cmd="qzone"></a>
			            <a href="#" class="bds_tsina" data-cmd="tsina"></a>
			            <a href="#" class="bds_weixin" data-cmd="weixin"></a>
					</div>
				</div>
			</div>
			<div class="detail_1_r">
				<!--<p class="vip">商家类型：<img :src="vip_img" /></p>-->
				<p>扫码关注微信公众号</p>
				<img src="../../static/img/code.jpg"/>
			</div>
		</div>
		<!--------------申请流程---------------->
		<div class="flow">
			<div class="flow_title">
				申<br />请<br />流<br />程
			</div>
			<div class="flow_item">
				<img src="../../static/img/detail-12.png"/>
				<div>
					<p>1.申请流程</p>
					<p>选择喜爱的宝贝完成申请</p>
				</div>
			</div>
			<div class="flow_item">
				<img src="../../static/img/detail-13.png"/>
				<div>
					<p>2.等待开奖</p>
					<p>每天10:00,21:00两场开奖</p>
				</div>
			</div>
			<div class="flow_item">
				<img src="../../static/img/detail-14.png"/>
				<div>
					<p>3.下单付款</p>
					<p>按照流程操作并提交订单号</p>
				</div>
			</div>
			<div class="flow_item">
				<img src="../../static/img/detail-15.png"/>
				<div>
					<p>4.提交试用报告</p>
					<p>提交客观真实的试用报告</p>
				</div>
			</div>
			<div class="flow_item">
				<img src="../../static/img/detail-16.png"/>
				<div>
					<p>5.返还担保金</p>
					<p>报告完成后返还担保金，提现</p>
				</div>
			</div>
		</div>
		<!-----------精选推荐，温馨提示，宝贝介绍---------------->
		<div class="recommend_cue">
			<!---------精选推荐----------->
			<div class="recommend">
				<div class="recommend_title">
					<p>精选推荐</p>
					<p class="batch" @click="anotherBatch"><img src="../../static/img/detail-18.png"/>换一批</p>
				</div>
				<div v-for="item in taskList.slice(0,5)" class="task_item">
					<router-link :to="{path:'/home/detail',query:{taskId:item.id}}">
					<div class="task_img">
						<img :src="item.goodsImage"/>
					</div>
	  				<div class="task_title">
	  					<img :src="getPaltformImg(item.paltform)"/>
	  					<p>{{item.taskName}}</p>
	  				</div>
					<div class="price">
						<p>¥{{item.price}}</p>
						<p>已有{{item.applyNum}}人申请</p>
					</div>
					</router-link>
	  			</div>
			</div>
			<!----------温馨提示，宝贝介绍----------->
			<div class="cue_introduce">
				<!-------温馨提示--------->
				<div class="cue">
					<div class="cue_title">
						<div>
							<img src="../../static/img/detail-19.png"/>
							<p>温馨提示</p>
							<img src="../../static/img/detail-19.png"/>
						</div>
					</div>
					<div class="cue_item">
						<p><span></span>请注意以下事项</p>
						<div class="cue_content">
							<ul>
								<li>请核对店铺拍下订单的单价加邮费是否是{{task_price}}元</li>
								<li>无特殊说明，请不要使用产生手续费的付款方式</li>
							</ul>
							<ul>
								<li>禁止在旺旺/咚咚上提"赶紧试"、"免费试用"等</li>
								<li>不要催促商家返款</li>
							</ul>
						</div>
					</div>
					<div class="cue_item">
						<p><span></span>如何提高申请通过率</p>
						<div class="cue_content">
							<p>申请次数越多；连续签到时间越长；多邀请好友一起参加，及时绑定微信，及时完善个人信息，开通VIP服务，满足这些条件，通过率就越高哦~</p>
						</div>
					</div>
				</div>
				<!--------宝贝介绍--------->
				<div class="introduce">
					<div class="introduce_title">
						<div @click="introduce(1)" :class="introduce_num == '1'?'introduce_active':''">
							<p>宝贝介绍</p>
							<img src="../../static/img/detail-20.png"/>
						</div>
						<div @click="introduce(2)" :class="introduce_num == '2'?'introduce_active':''">
							<p>新手流程</p>
							<img src="../../static/img/detail-20.png"/>
						</div>
					</div> 
					<section v-show="introduce_num == '1'" id="introduce" >
						 <div v-if="goodsDetailImage" v-html="goodsDetailImage"></div>
						 <div v-else class="noIntroduce">
						 	<p>试用流程：</p>
							<ul>
								<li>1.申请试用，获得试用资格。</li>
								<li>2.申请通过后，按照搜索流程提示，以<span>{{task_price}}</span>元去指定平台下单。</li>
								<li>3.下单完成后，回赶紧试填写购买付款的订单号。</li>
								<li>4.等待收货→确认收货→给予宝贝评价，并填写试用  报告。</li>
								<li>5.报告通过→返还<span>{{task_price}}</span>元到您的赶紧试账户中→试用完成。</li>
							</ul>
							<p>注意事项</p>
							<ul>
								<li>1.禁止使用信用卡、淘金币、优惠券、红包、花呗、天猫积分等。</li>
								<li>2.禁止通过淘宝客，返利网、一淘等返现返利网链接下单。</li>
								<li>以上由于买家违规下单所产生的费用，由买家承担。赶紧试有权冻结其账号，限制提现操作，IP列入黑名单。</li>
							</ul>
							<p>温馨提示：</p>
							<ul>
								<li>1.用户获得试用资格后，请根据时间提示按时提交订单号和试用报告。</li>
								<li>2.若因未按时提交以上信息而被系统取消试用资格，用户可在"可恢复"中选择恢复资格。</li>
								<li>3.若活动已无剩余资格，将无法恢复资格，由此造成的损失需由买家承担。</li>
							</ul>
						 </div>
					</section>
					<section class="newProcess" v-show="introduce_num == '2'">
						<div class="processStep">
							<div class="step_title">
								<div class="step_num">
									<img src="../../static/img/detail-21.png"/>
									<p>1</p>
								</div>
								<p>申请试用，获取资格：</p>
							</div>
							<div class="step_content">
								<p>用户在免费试用详情页面点击"免费申请"，找到宝贝后，加入购物车，提交申请。</p>
								<img src="../../static/img/detail-22.png"/>
							</div>
							<div class="step_title">
								<div class="step_num">
									<img src="../../static/img/detail-21.png"/>
									<p>2</p>
								</div>
								<p>等待开奖后，去指定平台购买：</p>
							</div>
							<div class="step_content">
								<p>获取资格后，4小时内从购物车找到宝贝，下单并提交订单号。</p>
								<img src="../../static/img/detail-23.png"/>
							</div>
							<div class="step_title">
								<div class="step_num">
									<img src="../../static/img/detail-21.png"/>
									<p>3</p>
								</div>
								<p>电商平台确认收货：</p>
							</div>
							<div class="step_content">
								<p>用户收到货后，在电商平台"已买到宝贝"对相应的宝贝订单确认收货并给予评价，并在赶紧试提交试用报告。</p>
								<img src="../../static/img/detail-24.png"/>
							</div>
							<div class="step_title">
								<div class="step_num">
									<img src="../../static/img/detail-21.png"/>
									<p>4</p>
								</div>
								<p>完成活动，付款到账：</p>
							</div>
							<div class="step_content">
								<p>报告通过后，系统即付款到赶紧试账号，可在用户中心点击"提现"按钮申请提现。</p>
							</div>
						</div>
					</section>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import QRCode from 'qrcodejs2'
export default {
	name: 'detail',
	data: function(){
		return{
			oneDay:'',
			flag: true,
			detailHtml:'',
			taskId:'',
			currentPage:1,
			total:0,
			task_title: '2018新款短袖女装绿色',//标题
			task_mainImg: '../../static/img/avatar.jpg',//主图
			task_platform: '../../static/img/tb.png',//平台
			task_now: 0,//剩余份数
			task_all: 0,//总份数
			task_price: 0,//商品价值
			task_gold: 0,//金币兑换
			task_time: '10:00',//开奖时间
			task_guarantee: 0,//担保金
			people_apply: 0,//已申请人数
			people_pass: 0,//已中奖人数
			vip_img: '../../static/img/vip-01.png',//vip等级
			task_code: '',//手机申请二维码
			qrcodeShow: false,//手机申请二维码显示隐藏
			introduce_num: '1',//判断宝贝介绍，新手流程是否选中
			taskList:[
		      	{
		      		Img:'../../static/img/avatar.jpg',
		      		platform:'../../static/img/tb.png',
		      		title:'2018新款短袖女装绿色新款短袖女装绿色',
		      		price:'108.00',
		      		people:'1055'
		      	},
		      	{
		      		Img:'../../static/img/avatar.jpg',
		      		platform:'../../static/img/tb.png',
		      		title:'2018新款短袖女装绿色新款短袖女装绿色',
		      		price:'108.00',
		      		people:'1055'
		      	},
		      	{
		      		Img:'../../static/img/avatar.jpg',
		      		platform:'../../static/img/tb.png',
		      		title:'2018新款短袖女装绿色新款短袖女装绿色',
		      		price:'108.00',
		      		people:'1055'
		      	},
		      	{
		      		Img:'../../static/img/avatar.jpg',
		      		platform:'../../static/img/tb.png',
		      		title:'2018新款短袖女装绿色新款短袖女装绿色',
		      		price:'108.00',
		      		people:'1055'
		      	},
		      	{
		      		Img:'../../static/img/avatar.jpg',
		      		platform:'../../static/img/tb.png',
		      		title:'2018新款短袖女装绿色新款短袖女装绿色',
		      		price:'108.00',
		      		people:'1055'
		      	},
		    ],
		    goodsDetailImage:'',
		    type:'',//活动类型
		    nowSurplus:0,//今日剩余份数
		    groupsNumber:0,//需组团人数
		    currentGroupNumber:0,//当前组团人数
		}
	},
	methods:{
		showqrcode:function(){
			if(this.nowSurplus==0 && (this.type==3 || this.type==7)){
				
			}else{
				if(this.qrcodeShow){
					this.qrcodeShow = false;
				}else{
					this.qrcodeShow = true;
				}
				this.qrcode("http://www.ganjinshi.com/user/#/taskDetail/"+this.taskId)
			}
		},
		//-------切换宝贝介绍和新手流程------
		introduce:function(n){
			this.introduce_num = n;
//			if(n==1){
//				this.detailHtml = this.goodsDetailImage;
//			}else if(n==2){
//				this.detailHtml = "欢迎来到新手流程！";
//			}
		},
		showDetail:function(){
			var _this = this;
			let postData = _this.$qs.stringify({
				id:_this.taskId
	        })
			_this.$axios.post('/agent/home/public/taskDetails',postData).then(function(res){
			    var data = res.data;
			    if(data.message=="succ"){
			    	data = data.result;
			    	_this.task_title = data.task.taskName;
			    	_this.task_mainImg = data.task.goodsImage;
			    	_this.task_platform = data.task.paltform;
			    	if(data.taskList != null){
			    		_this.nowSurplus = data.taskList.surplusNum;
			    		_this.currentGroupNumber = data.taskList.currentGroupNumber;
			    		_this.groupsNumber = data.taskList.groupsNumber;
			    	}
			    	_this.task_now = data.task.surplusNum;
			    	_this.task_all = data.task.releaseNum;
			    	_this.people_pass = data.task.releaseNum-data.task.surplusNum;
			    	_this.task_price = data.task.price;
			    	_this.task_gold = data.task.coinsExchange;
			    	_this.task_guarantee = data.task.taskPrice;
			    	_this.people_apply = data.task.applyNum;
			    	_this.task_code = data.task.qrcode;
			    	_this.type = data.task.type;
			    	if(_this.nowSurplus==0 && (_this.type==3 || _this.type==7)){
			    		
			    	}else{
			    		var d = new Date();
				    	if(data.taskList==null){
				    		_this.oneDay='明日';
				    		_this.task_time='10:00';
				    	}else{
				    		if(d.getHours()<10){
					    		_this.oneDay='今日';
					    		_this.task_time='10:00';
					    	}else if(10<=d.getHours()<21){
					    		_this.oneDay='今日';
					    		_this.task_time='21:00';
					    	}else{
					    		_this.oneDay='明日';
					    		_this.task_time='10:00';
					    	}
				    	}
			    	}
			    	var code = data.task.goodsDetailImage.replace(/& #39;/g, "'");
		       	 	code = code.replace(/\[\*\]/g, "*");
			    	_this.loadScriptString(code);
			    }else{
			    	_this.$alert("2",data.result);
			    }
			}).catch(function (error) {
			    console.log(error);
			});
		},
		showCondition:function(){
			var _this = this;
			let postData = _this.$qs.stringify({
				startPage:_this.currentPage,
				pageSize:5,
	        })
			_this.$axios.post('/agent/home/public/showCondition',postData).then(function(res){
			    var data = res.data;
			    if(data.message=="succ"){
			    	data = data.result;
			    	_this.taskList = data.list;
			    	_this.total = data.total;
			    }else{
			    	_this.$alert("2",data.result);
			    }
			}).catch(function (error) {
			    console.log(error);
			});
		},
		anotherBatch:function(){
			this.currentPage = Math.ceil(Math.random()*(this.total/5));
			this.showCondition();
		},
		getPaltformImg:function(obj){
			if(obj==1){
				return "./../static/img/tb.png";
			}else if(obj==2){
				return "./../static/img/tm.png";
			}else if(obj==3){
				return "./../static/img/jd.png";
			}
		},
		/**
		 * 加载js
		 * @param {Object} code
		 */
		loadScriptString:function(code) {
			try {
				var script = document.createElement("script");
				var _this = this;
				script.type = "text/javascript";
				try {
					// firefox、safari、chrome和Opera
					script.appendChild(document.createTextNode(code));
				} catch (ex) {
					// IE早期的浏览器 ,需要使用script的text属性来指定javascript代码。
					script.text = code;
				}
				document.getElementsByTagName("head")[0].appendChild(script);
				var paltform = this.task_platform;			
				//淘宝
				if(paltform==1){
					//js加载半秒后执行，防止异步获取不到数据
					let postData = _this.$qs.stringify({
						url: "http:" + g_config.descUrl
					});
					_this.$axios.post('/agent/parser/public/test2',postData).then(function(res){
					    var data = res.data.result;
					    _this.loadDetail(data);
					    var Time = setTimeout(function(){
							_this.goodsDetailImage = desc;
							console.log(_this.detailHtml)
						},500);
					}).catch(function (error) { 
					    console.log(error);
					});
			    
				}else if(paltform==2){
					/*var script = document.createElement("script");
					script.src = "http:" + g_config.descUrl;*/
					let postData = _this.$qs.stringify({
						url: "http:" + g_config.descUrl
					});
					_this.$axios.post('/agent/parser/public/test2',postData).then(function(res){
					    var data = res.data.result;
					    _this.loadDetail(data);
					    var Time = setTimeout(function(){
							_this.goodsDetailImage = desc;
							console.log(_this.detailHtml)
						},500);
					}).catch(function (error) { 
					    console.log(error);
					});
				}else{
					let postData = _this.$qs.stringify({
						url: "http:" + g_config.product.desc
					});
					_this.$axios.post('/agent/parser/public/test2',postData).then(function(res){
					    var data = jQuery.parseJSON(res.data.result);
					    _this.goodsDetailImage = data.content;
					}).catch(function (error) { 
					    console.log(error);
					});
				}
			}catch (ex) {
				console.log(ex);
				$("#loading").remove();
			}
		},
		loadDetail:function(code){
			var script = document.createElement("script");
				var _this = this;
				script.type = "text/javascript";
				try {
					// firefox、safari、chrome和Opera
					script.appendChild(document.createTextNode(code));
				} catch (ex) {
					// IE早期的浏览器 ,需要使用script的text属性来指定javascript代码。
					script.text = code;
				}
				document.getElementsByTagName("head")[0].appendChild(script);
		},
		qrcode:function(url) {
			$("#QRcode").empty();
	      	let qrcode = new QRCode('QRcode', {
	        	width: 170,
	        	height: 170, // 高度
	        	text: url, // 二维码内容
	        })
	    },
		setup:function(){    
            window._bd_share_config={
                "common":{
                    "bdSnsKey":{},
                    "bdText":this.task_title + " - 领免费试用，就上赶紧试",
                    "bdDesc" : '【免费试用】'+ this.task_title +'  亲们，我免费领到了价值 '+ this.task_price +' 元的宝贝，申请通过率80%，快来帮我看看怎么样！赞吧~',	
                    "bdMini":"2",
                    "bdUrl" : window.location.href, 
                    "bdPic":this.task_mainImg,
                    "bdStyle":"0",
                    "bdSize":"16"
                },
                "share":{},
                "image":{
                    "viewList":["sqq","qzone","tsina","weixin"],
                    "viewText":"分享到：","viewSize":"16"
                },
                "selectShare":{
                    "bdContainerClass":null,
                    "bdSelectMiniList":["sqq","qzone","tsina","weixin"]
                }
            };
            const s = document.createElement('script');
            s.type = 'text/javascript';
            s.src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5);
            document.body.appendChild(s);
        }
	},
	mounted:function(){
        this.$nextTick(() => {
        	setTimeout(() => {
        		this.setup();
        	}, 1000)
        })
    },
    beforeCreate: function(){
    	window._bd_share_main = "";
    },
	created:function(){
		this.taskId = this.$route.query.taskId;
		this.showDetail();
		this.showCondition();
	},
	watch:{
		'$route'(){
			this.taskId = this.$route.query.taskId;
			this.showDetail();
		},
	},
	updated: function() {
	    $('#introduce').find('*').css('max-width', '100%');
	    $('#introduce').find('*').css('word-break', 'break-all');
	    $('#introduce').find('*').css('white-space', 'pre-wrap');
	    $('#introduce').find('img').css('margin', '0');
	    $('.tab1').find('table').attr('width', '100%');
	}
}
</script>
<!--<script>
	
</script>-->
<style scoped>
#detail{
	width: 1230px;
	margin: 0 auto;
}
.path{
	display: flex;
	align-items: center;
	color: #5E5E5E;
	margin-top: 20px;
	margin-bottom: 10px;
}
.path a{
	margin-right: 3px;
}
/*--------基本信息-----------*/
.detail_1{
	background-color: #fff;
	display: flex;
}
.detail_1_l{
	display: flex;
	padding: 20px;
	box-sizing: border-box;
	/*align-items: center;*/
}
.detail_text{
	width: 600px;
}
.detail_1_l>img{
	width: 304px;
	height: 304px;
	display: block;
	margin-right: 20px;
}
.detail_title img{
	display: inline-block;
	width: 20px;
	height: 20px;
}
.detail_title p{
	display: inline-block;
	color: #5E5E5E;
	font-size: 16px;
	font-weight: 600;
}
.residue{
	margin-top: 10px;
	color: #5E5E5E;
}
.residue span{
	font-weight: 600;
}
.apply{
	width: 600px;
	margin-top: 10px;
	padding: 10px;
	box-sizing: border-box;
	background: url('../../static/img/detail-01.png') no-repeat;
	background-size: 100% auto;
}
.detail_price{
	display: flex;
}
.detail_price p{
	margin-right: 20px;
	color: #5E5E5E;
}
.detail_price p span{
	color: #FF464E;
	font-weight: 600;
}
/*---------开奖时间--------------*/
.task_time{
	display: flex;
	align-items: center;
	margin-top: 15px;
}
.task_time img{
	height: 15px;
	display: block;
	margin-right: 3px;
}
.task_time p{
	color: #5E5E5E;
}
.task_time p span{
	color: #FF464E;
}
.toapply{
	display: flex;
	margin-top: 15px;
}
/*--------兑换，申请-----------*/
.toapply>div{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 120px;
	height: 35px;
	box-sizing: border-box;
	cursor: pointer;
}
.toapply>div>img{
	height: 15px;
	display: block;
	margin-right: 3px;
}
.exchange{
	border: 1px solid #FF464E;
	background-color: #FFEEEE;
	color: #FF464E;
	margin-right: 10px;
}
/*----------手机申请------------*/
.phone{
	background-color: #FF464E;
	color: #FFFFFF;
	position: relative;
}
.noNum{
	background-color: #CCCCCC;
}
.phone .qrcode{
	position: absolute;
	top: 40px;
	left: 0;
	background-color: #fff;
	border: 1px solid #CCCCCC;
	padding: 20px;
	box-sizing: border-box;
}
.phone .qrcode p:first-child{
	font-size: 16px;
	font-weight: 600;
	color: #4D4D4D;
	text-align: center;
}
.phone .qrcode p:nth-child(2){
	font-size: 14px;
	font-weight: 600;
	color: #FF464E;
	text-align: center;
	line-height: 20px;
	margin-top: 10px;
}
.phone .qrcode .QRcode{
	margin: 20px;
	display: block;
}
/*---------担保-----------*/
.guarantee{
	display: flex;
	align-items: center;
	color: #5E5E5E;
	margin-top: 15px;
}
.guarantee img{
	height: 15px;
	display: block;
	margin-right: 3px;
}
/*-------申请，中奖人数-----------*/
.people{
	display: flex;
	border-bottom: 1px dashed #cccccc;
	border-top: 1px dashed #cccccc;
	padding: 10px 0;
	margin-top: 15px;
	color: #5E5E5E;
}
.people p{
	width: 50%;
	text-align: center;
}
.people p span{
	font-weight: 600;
	margin-right: 5px;
}
.people_apply{
	border-right: 1px dashed #CCCCCC;
	box-sizing: border-box;
}
.people_pass span{
	color: #FF464E;
}
/*--------分享-----------*/
.share{
	display: flex;
	align-items: center;
	margin-top: 15px;
}
.share p{
	color: #5E5E5E;
}
.share p span{
	color: #FF464E;
}
.share img{
	height: 15px;
	display: block;
	margin-left: 5px;
}
/*----------vip及二维码-------------*/
.detail_1_r{
	width: 266px;
	border-left: 1px dashed #CCCCCC;
	height: 344px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.vip{
	text-align: center;
	color: #5E5E5E;
	margin-top: 30px;
}
.vip img{
	display: inline-block;
	height: 15px;
	margin-left: 3px;
}
.detail_1_r>img{
	width: 150px;
	display: block;
	margin: 0 auto;
	/*margin-top: 40px;*/
	margin-top: 10px;
}
/*----------申请流程-------------*/
.flow{
	display: flex;
	align-items: center;
	height: 80px;
	background-color: #fff;
	margin-top: 15px;
}
.flow_title{
	height: 80px;
	width: 40px;
	background: url('../../static/img/detail-17.png') no-repeat;
	background-size: 100% 100%;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	padding-left: 10px;
	box-sizing: border-box;
	line-height: 15px;
}
.flow_item{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 237px;
	height: 100%;
}
.flow_item img{
	height: 50px;
	display: block;
	margin-right: 10px;
}
.flow_item div p:first-child{
	color: #4D4D4D;
}
.flow_item div p:last-child{
	color: #9F9F9F;
	font-size: 12px;
}
/*------------精选推荐 温馨提示 商品详情-----------------*/
.recommend_cue{
	display: flex;
	margin-top: 15px;
}
/*---------精选推荐-------------*/
.recommend{
	padding: 20px;
	padding-bottom: 10px;
	box-sizing: border-box;
	background-color: #fff;
	width: 258px;
	height: 1500px;
}
.recommend_title{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}
.recommend_title p:first-child{
	color: #4D4D4D;
}
.batch{
	font-size: 12px;
	color: #9F9F9F;
	display: flex;
	align-items: center;
	cursor: pointer;
}
.batch img{
	height: 12px;
	display: block;
	margin-right: 3px;
}
.recommend .task_item:last-child{
	border-bottom: none;
}
/*----------单个任务-------------*/
.task_item{
	width: 218px;
	background-color: #fff;
	padding: 10px;
	box-sizing: border-box;
	margin-right: 10px;
	border-bottom: 1px dashed #CCCCCC;
	cursor: pointer;
}
.task_item:hover .shade{
	display: block;
}
.task_img{
	position: relative;
}
.task_img .shade{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(255,255,255,0.2);
	display: none;
}
.task_img img{
	width: 100%;
	display: block;
}
.task_title{
	margin-top: 5px;
	display: flex;
	align-items: flex-end;
}
.task_title img{
	display: block;
	height: 20px;
	margin-right: 5px;
}
.task_title p{
	width: calc(100% - 25px);
	height: 20px;
	line-height: 28px;
	color: #5E5E5E;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.price{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10px;
}
.price p:first-child{
	color: #FF464E;
	text-decoration: line-through;
}
.price p:last-child{
	color: #5E5E5E;
}
/*----------温馨提示  宝贝介绍---------------*/
.cue_introduce{
	width: 952px;
	margin-left: 20px;
}
.cue{
	background-color: #fff;
	padding: 30px;
	box-sizing: border-box;
}
.cue_title{
	border-top: 1px dashed #CCCCCC;
	margin-bottom: 20px;
}
.cue_title div{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: -10px;
}
.cue_title div img{
	height: 20px;
	display: block;
	background-color: #fff;
}
.cue_title div p{
	font-size: 16px;
	color: #5E5E5E;
	background-color: #fff;
	padding: 0 5px;
}
.cue_item{
	margin-top: 10px;
}
.cue_item>p{
	color: #4D4D4D;
	display: flex;
	align-items: center;
}
.cue_item>p span{
	height: 12px;
	width: 2px;
	margin-right: 5px;
	background-color: #FF464E;
}
.cue_content{
	padding: 10px;
	box-sizing: border-box;
	color: #9F9F9F;
	display: flex;
}
.cue_content ul{
	margin-right: 30px;
}
.cue_content ul li{
	margin-bottom: 10px;
}
.cue_content ul li:last-child{
	margin-bottom: 0;
}
.cue_content p{
	line-height: 25px;
}
/*---------宝贝介绍------------*/
.introduce{
	margin-top: 15px;
	background-color: #fff;
}
.introduce_title{
	display: flex;
	border: 1px solid #E6E6E6;
	box-sizing: border-box;
}
.introduce_title div{
	height: 40px;
	width: 120px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #4D4D4D;
	cursor: pointer;
	box-sizing: border-box;
}
.introduce_title div:first-child{
	border-right: 1px solid #E6E6E6;
}
.introduce_title div:last-child{
	border-right: 1px solid transparent;
}
.introduce_title div img{
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	display: none;
}
.introduce_title div.introduce_active{
	border-right: 1px solid #E6E6E6;
}
.introduce_title div.introduce_active img{
	display: block;
}
#introduce{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px 20px;
	box-sizing: border-box;
}
.noIntroduce{
	padding-bottom: 50px;
}
.noIntroduce p{
	color: #FF464E;
	font-size: 14px;
	margin-top: 30px;
}
.noIntroduce ul li{
	color: #545454;
	line-height: 30px;
}
.noIntroduce ul li span{
	color: #FF464E;
}
/*-------------新手流程--------------*/
.newProcess{
	padding: 20px 0;
}
.processStep{
	width: 80%;
	margin: 0 auto;
	border-left: 1px dashed #FF464E;
}
.step_title{
	display: flex;
	align-items: center;
	margin-left: -15px;
}
.step_num{
	width: 30px;
	position: relative;
	margin-right: 10px;
}
.step_num img{
	width: 100%;
	display: block;
}
.step_num p{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFFFFF;
	font-size: 16px;
}
.step_title>p{
	font-size: 16px;
	color: #4f4f4f;
	font-weight: 600;
}
.step_content{
	padding: 15px;
	padding-left: 25px;
	box-sizing: border-box;
	color: #FF464E;
}
.step_content img{
	width: 45%;
	display: block;
	margin: 20px auto;
}
</style>
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
